/**
 * Styling for submissions.js
 */

@import (reference) "general.less";

/* Link that opens the review panel */
.afch-open {
	font-size: 0.5em;
	padding-left: 5px;
	line-height: 1em;
	cursor: pointer;
}

.afch {
	/* Reset base sizes, thanks typography refresh :P */
	font-size: 13px;
	line-height: 19px;

	/* This mixin sets the color of the panel */
	.ThemedPanel(@color) {
		background-color: @color;
		border-color: @color;
	}

	/* Constant UI elements */

	.review-panel {
		border-width: 2px;
		border-style: solid;
		font-family: Helvetica, sans-serif;
		font-size: 1.2em;
		margin-bottom: 20px;
	}

	.top-bar {
		position: relative;
		width: 100%;
		z-index: 999;

		div {
			color: @white;
			font-size: 1em;
			cursor: pointer;
			position: absolute;
			padding: 5px;
		}

		.back-link {
			font-size: 0.9em;
			text-transform: uppercase;
		}

		.close-link {
			right: 0;
			margin-top: -0.4em;
			font-size: 1.2em;
		}
	}

	.header {
		height: 60px;
		line-height: 1.2em;
		font-size: 60px;
		color: @white;
		font-weight: bold;
		text-align: right;
		text-transform: uppercase;
		overflow: hidden;
		vertical-align: top;
	}

	#afchSubmitForm {
		text-align: center;
		width: 30%;
		padding: 5px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: 0px;

		&.button-centered {
			margin-left: auto;
			margin-right: auto;
		}
	}

	#afchStatus {
		list-style-position: inside;
		text-align: left;
	}

	.content {
		background-color: @white;
		padding: 10px;
	}

	.bad-input, .bad-input:focus {
		border-width: medium;
		border-color: @red;
	}

	/* MAIN (+SPLASH) */

	.initial,
	.splash {
		.ThemedPanel(@sexyblack);
	}

	.initial-header {
		font-size: 25px;
		color: @white;
		text-align: center;
		margin: 10px;
		position: relative;

		> span {
			display: block;
			font-size: 15px;
			padding-bottom: 4px;
		}
	}

	.warnings {
		text-align: center;
		background-color: @orange;
		margin: 0px 10px 10px;
		padding: 5px;
	}

	.afch-warning {
		padding: 8px 0px;

		> a {
			padding-left: 2px;
			font-size: 0.8em;
			color: @sexyblack;
		}

		& + .afch-warning {
			border-top: 1px solid black;
		}
	}


	.deletion-log {
		background-color: @white;
		text-align: left;
		padding: 5px;
		margin: 10px 20px;
		border: 1px dashed black;
		max-height: 90px;
		overflow: auto;

		td {
			padding: 5px;
		}

		.timestamp {
			color: @gray;
			text-align: right;
			white-space: nowrap;
			vertical-align: top;
		}

		.reason {
			font-family: monospace, Courier;
		}

		.actor {
			color: @gray;
			font-size: 0.75em;
			white-space: nowrap;
		}
	}

	div.code-wrapper > pre {
		padding: 0.1em;

		/* Wrap lines */
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.button-wrapper {
		width: 100%;
		display: table;
		table-layout: fixed;
	}

	.afch-button {
		vertical-align: middle;
		line-height: 2em;
		font-family: arial, sans-serif;
		font-size: 1.5em;
		color: @sexyblack;
		text-align: center;
		padding: 5px;
		display: table-cell;

	}

	#afchDecline {
		font-size: 1.3em;
	}

	.extra {
		background-color: @white;
		height: 100%;
		width: 20px;
		vertical-align: top;

		.wrapper {
			position: relative;

			.open {
				position: absolute;
				height: 100%;
				font-size: 1.5em;
				cursor: pointer;

				&:hover {
					font-weight: bold;
				}
			}

			.links {
				text-align: left;
				padding-left: 26px;
				padding-top: 8px;

				a {
					display: none;
					line-height: 1em;
					font-size: 0.7em;
					color: @sexyblack;
				}
			}
		}
	}

	/* ACCEPT */

	.accept {
		.ThemedPanel(@green);

		.afch-label {
			margin-top: 12px;
			width: 20%;
			min-width: 150px;
		}

		select#lifeStatus.afch-input {
			vertical-align: middle;
		}

		#titleStatus {
			font-size: 0.75em;
			color: @red;
		}

		.chzn-container {
			margin-top: 10px;
			vertical-align: bottom;
		}

		/* Supplement jquery.chosen hackery; this is for the "manually add project" link. */
		#newWikiProjects_chzn a {
			cursor: pointer;
		}

		/*
			Since we are hacking this dynamic suggestion feature into
			jquery.chosen, we have to manually set the width of the input.
			(see "Offer dynamic category suggestions" in submissions.js)
		*/
		#newCategories_chzn input {
			width: 350px !important;
		}
	}


	/* DECLINE */

	.decline {
		.ThemedPanel(@red);

		#declineInputWrapper {
			padding-top: 5px;
		}

		#previewTrigger {
			font-size: 80%;
		}

		#previewContainer {
			border: thin dotted gray;
			width: 50%;
			margin: 0.5em auto;
			text-align: left;
			padding: 0 0.5em;
		}

		#previewContainer:empty {
			display: none;
		}

		#declineRejectWrapper{
			font-size: 120%;
			padding: 0;
			border: 0;
			margin: 0 0 .5em 0;
		}
	}

	/* COMMENT */

	.comment {
		.ThemedPanel(@yellow);
	}

	#commentText {
		height: 100px;
		width: 60%;
	}

	/* TAG FOR G13 DELETION */

	.g13 {
		.ThemedPanel(@orange);
	}

	/* POSTPONE G13 */

	.postpone-g13 {
		.ThemedPanel(@yellow);
	}

	/* SUBMIT */

	.submit {
		.ThemedPanel(@blue);

		select {
			vertical-align: baseline;
		}

		.error {
			font-size: .8em;
			color: @red;
		}
	}

	/* MARK/UNMARK AS UNDER REVIEW */

	.mark {
		.ThemedPanel(@blue);
	}

	/* OTHER */

	.other-action {
		.ThemedPanel(@yellow);
	}
}
